<template>
  <ul class="ticket-list">
    <li v-for="(item, index) of list" :key="index">
      <div class="bottom-line"><span class="icon-ticket"></span>{{item.title}}</div>
      <div v-if="item.children" class="children">
        <detail-list :list="item.children"></detail-list>
      </div>
    </li>
  </ul>
</template>

<script>
export default {
  name: 'detailList',
  props: {
    list: Array
  }
}
</script>

<style>
.ticket-list { margin-top:.2rem; background:#fff; width:100%; overflow:hidden; font-size:.32rem;}
.ticket-list li { width:100%; float:left; line-height:.8rem;}
.bottom-line { border-bottom:1px solid #EAEAEA; padding:0 .2rem;}
.children { padding:0 0 0 .4rem;}
.icon-ticket {
  display: inline-block;
  width: .36rem;
  height: .36rem;
  background: url('http://s.qunarzz.com/piao/image/touch/sight/detail.png') 0 -.45rem no-repeat;
  background-size: .4rem 3rem;
  vertical-align: middle;
  margin: 0 .03rem 0 .06rem;
}
</style>
